<template>
  <el-table :summary-method="getSummaries" show-summary :data="tableData" :span-method="objectSpanMethod" border class="statistics-list">
    <el-table-column prop="typeName" align="center" label="钻机类型">
      <template slot-scope="{row}">
        <span class="to-link" @click="goEquipmentType(row)">{{ row.typeName }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="equipmentTypeCount" align="center" label="合计(台)" />
    <el-table-column prop="countyName" align="center" label="区/县">
      <template slot-scope="{row}">
        <span class="to-link" @click="goEquipment(row)">{{ row.countyName }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="equipmentCountyCount" align="center" label="总数(台)" />
    <el-table-column prop="buildProCount" align="center" label="施工中项目数(个)" />
    <el-table-column prop="buildEquipmentCount" align="center" label="施工中设备数(台)" />

  </el-table>
</template>

<script>
import { equimentStatisticsExport } from '@/api/statisticalAnalysis/statistics/equiment'
import { dataMethod } from '@/utils/tableObjectSpanMethod.js'
export default {
  name: 'Home',
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 统计可筛选区域列表
      regionList: [],
      spanObj: {}
    }
  },
  watch: {
    tableData: {
      immediate: true,
      handler(value) {
        if (value && value.length) {
          this.spanObj = dataMethod(this.tableData, ['typeName', 'equipmentTypeCount', 'countyName'])
          const regionList = this.tableData.map(item => ({ countyName: item.countyName, county: item.county }))
          this.regionList = this.deteleObject(regionList)
        }
      }
    }
  },
  methods: {
    deteleObject(arr) {
      const temp = {}	//	用于name判断
      const result = [] // 最后的新数组
      arr.map((item, index) => {
        if (!temp[item.county]) {
          result.push(item)
          temp[item.county] = true
        }
      })
      return result
    },
    async exportData() {
      const tableHeader = [
        {
          'key': 'typeName',
          'label': '钻机类型'
        },
        {
          'key': 'equipmentTypeCount',
          'label': '合计(台)'
        },
        {
          'key': 'countyName',
          'label': '区/县'
        },
        {
          'key': 'equipmentCountyCount',
          'label': '总数(台)'
        },
        {
          'key': 'buildProCount',
          'label': '施工中项目数(个)'
        },
        {
          'key': 'buildEquipmentCount',
          'label': '施工中设备数(个)'
        }
      ]
      const res = await equimentStatisticsExport(tableHeader)
      if (!res) return
      this.downloadFileFlow(res, '设备类型统计信息')
    },
    // 表格合计
    getSummaries(param) {
      const { data } = param
      const buildProCount = data.reduce((prev, item) => item.buildProCount + prev, 0)
      const buildEquipmentCount = data.reduce((prev, item) => item.buildEquipmentCount + prev, 0)
      const equipmentCountyCount = data.reduce((prev, item) => item.equipmentCountyCount + prev, 0)
      const sums = []
      sums.push('总计', equipmentCountyCount, '', equipmentCountyCount, buildProCount, buildEquipmentCount)
      return sums
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log({ row, column, rowIndex, columnIndex },'合并表格')
      // 列合并
      const _row = this.spanObj[column.property] ? this.spanObj[column.property][rowIndex] : 1
      const _col = _row > 0 ? 1 : 0
      return {
        rowspan: _row,
        colspan: _col
      }
    },
    goEquipmentType({ typeNum, equipmentTypeId }) {
      this.$router.push({
        name: 'statisticsList-equipment',
        params: { cityOptions: this.regionList, equipmentTypeId, typeNum, type: '1', currentTable: '0' }
      })
    },
    goEquipment({ typeNum, equipmentTypeId, county }) {
      this.$router.push({
        name: 'statisticsList-equipment',
        params: { cityOptions: this.regionList, equipmentTypeId, county, typeNum, type: '1', currentTable: '0' }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
